<template>
  <div>

    <div class="bigbox">
      <h1 id="title">欢迎进入TODO系统</h1>
      <div class="box1">
        <el-row>

          <el-button class="button_4" type="primary" size="medium" @click="goone">
            未开始
            <br>
            <span>{{ taskNumberData.notStart }}</span>
          </el-button>
          <el-button class="button_4" type="success" @click="goone">
            进行中
            <br>
            <span>{{ taskNumberData.started }}</span>
          </el-button>
          <el-button class="button_4" type="danger" @click="goone">
            超期
            <br><span>{{ taskNumberData.overdue }}</span>
          </el-button>
          <el-button class="button_4" type="info" @click="gotwo">
            已办
            <br><span>{{ taskNumberData.completed }}</span>
          </el-button>
        </el-row>
      </div>
      <div class="pic">
        <div id="main" class="box2">这是第一个可视化图,</div>
        <div id="main1" class="box3">这是第二个可视化图</div>

      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import { selectTaskByTime, selectTaskByWeek, selectTaskNumber } from '@/api/task'

export default {
  name: 'Dashboard',
  data() {
    return {
      taskNumberData: {},
      taskByTimeData: {},
      taskByWeedDate: {}
    }
  },
  watch: {
    taskByTimeData() {
      this.echartsInit()
    },
    taskByWeedDate() {
      this.echartsInit2()
    }
  },
  mounted() {
    this.selectTaskNumber()
    this.selectTaskByTime()
    this.selectTaskByWeek()
    // this.echartsInit()
    // this.echartsInit2()
  },
  methods: {
    selectTaskByTime() {
      return new Promise((resolve) => {
        selectTaskByTime().then((res) => {
          console.log(res.data)
          this.taskByTimeData = res.data
          resolve()
        })
      })
    },
    selectTaskNumber() {
      return new Promise((resolve) => {
        selectTaskNumber().then((res) => {
          this.taskNumberData = res.data
          resolve()
        })
      })
    },
    selectTaskByWeek() {
      return new Promise((resolve) => {
        selectTaskByWeek().then((res) => {
          this.taskByWeedDate = res.data
          resolve()
        })
      })
    },
    goone() {
      this.$router.push('/example')
    },
    gotwo() {
      this.$router.push('/example/tree')
    },
    echartsInit() {
      const chartDom = document.getElementById('main')
      const myChart = echarts.init(chartDom)

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          // data: [
          //   '未开始',
          //   '提前完成',
          //   '正常完成',
          //   '超期',
          //   '进行中',
          //   '超期完成'
          // ]
          data: this.taskByTimeData.legend
        },
        series: [
          {
            name: 'state',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 14
            },
            labelLine: {
              show: false
            },
            // data: [
            //   { value: 1548, name: '已办' },
            //   { value: 75, name: '待办' }
            // ]
            data: this.taskByTimeData.inner
          },
          {
            name: '',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
              length: 30
            },
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            // data: [
            //   { value: 1048, name: '超期' },
            //   { value: 335, name: '未开始' },
            //   { value: 310, name: '进行中' },
            //   { value: 251, name: '提前完成' },
            //   { value: 234, name: '正常完成' },
            //   { value: 147, name: '超期完成' }
            // ]
            data: this.taskByTimeData.outer
          }
        ]
      }
      myChart.setOption(option)
    },
    echartsInit2() {
      var chartDom = document.getElementById('main1')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        legend: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        title: {
          text: '本周任务数量',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // data: [120, 200, 150, 80, 70, 110, 130],
            data: this.taskByWeedDate,
            type: 'bar'
          }
        ]
      }

      option && myChart.setOption(option)
    }

  }
}

</script>

<style lang="scss" scoped>
#title {
  padding-top: 30px;
  text-align: center;
}

.bigbox {
  margin: 50px;
  width: 1460px;
  height: 800px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
  margin: 0 auto;
}

.box1 {
  margin: 20px 70px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
  width: 1300px;
  height: 150px;
  display: flex;
  justify-content: space-between;
  // background-color: aqua;
}

.button_4 {
  margin: 50px 90px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
  font-size: 20px;
  display: inline-block;
  height: 75px;
  width: 140px;
}

.button_4 span {
  display: inline-block;
  margin-top: 10px;
}

.pic {
  margin-top: 50px;
}

.box2 {
  float: left;
  margin-left: 50px;
  width: 600px;
  height: 450px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .4);

  // background-color: pink;
}

.box3 {
  float: left;
  margin-left: 100px;
  width: 600px;
  height: 450px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .4);

  // background-color: burlywood;
}
</style>
